<template>
    <swiper :modules="modules" :pagination="{ clickable: true }" :autoplay="{ delay: 4000 }"
        :navigation="{ prevEl: '.btn-left', nextEl: '.btn-right' }" :speed="2000">

        <SwiperSlide>
            <img class="img" src="../../images/index-04.jpg">
        </SwiperSlide>
        <swiper-slide>
            <img class="img" src="../../images/index-01.jpg">
        </swiper-slide>
        <swiper-slide>
            <img class="img" src="../../images/index-02.jpg">
        </swiper-slide>
        <swiper-slide>
            <img class="img" src="../../images/index-03.jpg">
        </swiper-slide>


        <div class="btn-left swiper-button-prev" style="margin-left: 220px;"></div>
        <div class="btn-right swiper-button-next" style="margin-right: 220px;"></div>
    </swiper>

    <div id="ImgInfo">
        <span id="info">往期作品</span><br>
        <span style="color: darkgray;font-size: 13px;margin-left: 35px;">Past works</span>
        <div style="display:flex;margin-left: 20px;margin-top: 10px;">
            <div style="flex: 1;">
                <div class="image-container">
                    <img src="../../images/index-06.jpg" class="infoImg"><br>
                </div>
                <span class="miaoshu"><span style="color: #9dd7c2;">●</span> 同里 - 山谷</span>
            </div>

            <div style="flex: 1;">
                <div class="image-container">
                    <img src="../../images/index-07.jpg" class="infoImg"><br>
                </div>
                <span class="miaoshu"><span style="color: #9dd7c2;">●</span> 牧野 - 风浮</span>
            </div>

            <div style="flex: 1;">
                <div class="image-container">
                    <img src="../../images/index-08.jpg" class="infoImg"><br>
                </div>
                <span class="miaoshu"><span style="color: #9dd7c2;">●</span> 乌镇 - 扶风</span>
            </div>
        </div>
    </div>


    <div id="ImgInfo2">
        <div style="display:flex;margin-left: 20px;margin-top: 10px;">
            <div style="flex: 1;">
                <div class="image-container">
                    <img src="../../images/index-09.jpg" class="infoImg"><br>
                </div>
                <span class="miaoshu"><span style="color: #9dd7c2;">●</span> 喀撒 - 雪见</span>
            </div>

            <div style="flex: 1;">
                <div class="image-container">
                    <img src="../../images/index-10.jpg" class="infoImg"><br>
                </div>
                <span class="miaoshu"><span style="color: #9dd7c2;">●</span> 牧野 - 若风</span>
            </div>

            <div style="flex: 1;">
                <div class="image-container">
                    <img src="../../images/index-05.jpg" class="infoImg"><br>
                </div>
                <span class="miaoshu"><span style="color: #9dd7c2;">●</span> 南浔 - 樱落</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
//swiper对应函数
import { Pagination, Autoplay, Navigation } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import 'swiper/swiper-bundle.css';

const modules = ref([Pagination, Autoplay, Navigation]);

</script>

<style scoped>
#box {
    text-align: center;
    width: "1100px";

}

.img {
    border: 1px solid darkgray;
    border-radius: 8px;
    padding: auto;
    width: 1100px;
    height: 650px;
    display: block;
    margin: 30px auto;
}

.img:hover {
    cursor: pointer;
}

.btn-left.swiper-button-prev,
.btn-right.swiper-button-next {
    color: rgb(213, 213, 213);
}


#ImgInfo {
    width: 1000px;
    margin: 10px auto;

}

#info {
    color: #333;
    font-weight: 600;
    border-left: 3px solid pink;
    padding-left: 10px;
    margin-left: 20px;
}


#ImgInfo2 {
    width: 1000px;
    margin: 40px auto;
}


/* 往期作品图片大小 */
.infoImg {
    width: 300px;
    /* 设置图片初始宽度，可根据实际图片尺寸调整 */
    height: 533px;
    /* 设置图片初始高度，可根据实际图片尺寸调整 */
}

/* 容器大小 */
.image-container {
    position: relative;
    width: 300px;
    height: 533px;
    overflow: hidden;
}

.image-container .infoImg {
    transition: transform 0.3s ease;
    /* 添加平滑过渡效果 */
}

.image-container:hover .infoImg {
    transform: scale(1.2);
    /* 放大图片 */
}

.miaoshu {
    font-size: 13px;
}

</style>